<template>
  <div class="app-container">

    <el-form ref="formdata" :inline="true" :model="formdata" :rules="rules" class="demo-form-inline">
      <el-form-item label="电影名字">
        <el-input v-model="formdata.fnName" placeholder="电影名字" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="select(formdata.fnName)">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button id="add" type="success" @click="addmovie">添加</el-button>

    <el-table :data="movies" border fit highlight-current-row>

      <el-table-column align="center" label="电影编号" prop="fnId" width="95">
        <template slot-scope="scope">
          {{ scope.row.fnId }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="fnName" label="电影名字" width="180px">
        <template slot-scope="scope">
          {{ scope.row.fnName }}
        </template>
      </el-table-column>

      <el-table-column label="电影类型" prop="fnType" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.fnType }}</span>
        </template>
      </el-table-column>

      <el-table-column label="导演" width="90" prop="fnDirector" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.fnDirector }}</span>
        </template>
      </el-table-column>

      <el-table-column label="演员" prop="fnActor" width="380" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.fnActor }}</span>
        </template>
      </el-table-column>

      <el-table-column label="票价/元" prop="fnPrice" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.fnPrice }}
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="操作" width="190" align="center">
        <template slot-scope="scope">
          <el-button type="primary" round @click="updata(scope.row.fnId)">修改</el-button>
          <el-button type="danger" round @click="dele(scope.row.fnId)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
      id="fy"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="allCount"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, // 客户端想看的页数
      pageSize: 0, // 每页展示的条数
      allCount: 0, // 总条数
      pages: 0, // 总页数

      movies: [
        {
          fnId: 1,
          fnName: '勇敢者游戏2：再战巅峰',
          fnType: '剧情犯罪',
          fnDirector: '冯小刚',
          fnActor: '肖央 谭卓 陈冲 姜皓文 徐文姗 边天扬 张熙然',
          fnPrice: 40
        },
        {
          fnId: 2,
          fnName: '勇敢者游戏1',
          fnType: '剧情犯罪',
          fnDirector: '冯小刚',
          fnActor: '肖央 谭卓 陈冲 姜皓文 徐文姗 边天扬 张熙然',
          fnPrice: 50
        }
      ],
      formdata: {
        nfId: '',
        fnName: ''
      },
      rules: {
        nfId: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]

      }

    }
  },
  created() {
    this.show()
  },
  methods: {
    show() { // 展示所有的电影信息
      // var vm = this;
      // this.axios({
      //       url:'http://localhost:81/api/hot/hotMoviesInfor',
      //   }).then(function (res) {
      //       if (res.data.success){
      //           console.log(res.data.data);
      //           vm.movies=res.data.data;
      //       }
      //   })
      var vm = this
      var currentPage = this.currentPage

      console.log(currentPage)
      this.axios({
        url: 'http://localhost:81/api/hot/onepage',
        params: { 'currentPage': currentPage }
      }).then(function(res) {
        if (res.data.success) {
          vm.movies = res.data.data.onMovies
          vm.pageSize = res.data.data.pageSize
          vm.allCount = res.data.data.allCount
          vm.pages = res.data.data.pages
        }
      })
    },

    handleCurrentChange() {
      console.log(this.currentPage)
      var vm = this
      var currentPage = this.currentPage
      this.axios({
        url: 'http://localhost:81/api/hot/onepage',
        params: { 'currentPage': currentPage }
      }).then(function(res) {
        vm.movies = res.data.data.onMovies
        vm.pageSize = res.data.data.pageSize
        vm.allCount = res.data.data.allCount
        vm.pages = res.data.data.pages
      })
    },

    updata(fnId) { // 修改电影的方法
      console.log(fnId)
      this.$router.push({ name: 'UpdataHotMovieInfor', params: { 'fnId': fnId }})
    },
    dele(fnId) { // 删除电影的方法
      var vm = this
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 点击确认删除后，进行删除，发送ajax请求(参数fnId)
        console.log(fnId)
        this.axios({
          url: 'http://localhost:81/api/hot/deleteMovie',
          params: { fnId: fnId }
        }).then(function(res) {
          if (res.data.success) { // 如果成功
            vm.$message({ // 显示删除成功
              type: 'success',
              message: '删除成功!'
            })
            window.location.reload() // 刷新页面
          } else { // 反之失败
            vm.$message({
              type: 'info',
              message: '删除失败!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    select(fnName) { // 查询电影的方法
      var vm = this
      console.log(fnName)
      this.axios({
        url: 'http://localhost:81/api/hot/vagueselect',
        params: { fnName: fnName }
      }).then(function(res) {
        if (res.data.success) {
          vm.movies = res.data.data
        }
      })
    },
    addmovie() { // 添加电影的方法
      this.$router.push('/addHotMovies')
    }
  }
}
</script>
<style>
  .demo-form-inline{
    float: left;
    margin-left: 340px;
  }
  #add{
    float: left;

  }
  #fy{
    margin-left: 400px;
    margin-top: 30px;
  }
</style>
